<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Chenqiu
 * @LastEditTime: 2021-09-23 20:21:16
-->
<template>
  <div ref="root" style="height: 95%"></div>
</template>
<script>
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      function getData() {
        // generate an array of random data
        const data = [];
        const time = new Date().getTime();

        for (let i = -19; i <= 0; i += 1) {
          data.push({
            x: time + i * 1000,
            y: Math.random() + 0.2,
          });
        }
        return data;
      }

      const line = new Line(this.$refs['root'], {
        data: getData(),
        padding: "auto",
        xField: "x",
        yField: "y",
        xAxis: {
          type: "time",
          mask: "HH:MM:ss",
        },
        smooth: true,
        point: {},
      });
      line.render();
      setInterval(() => {
        const x = new Date().getTime(), // current time
          y = Math.random() + 0.2;
        const newData = line.options.data.slice(1).concat({ x, y });
        line.changeData(newData);
      }, 1000);
    },
  },
};
</script>